<template>
    <div class="pop-up-main" :style="{background:(isFlow?'rgba(255,255,255)':'')}">
      <div style="color:white;position: absolute;left:10px">
        <span>{{ imgName }}</span>
      </div>
      <div class="img-close" @click="handleCancel">
        <a-icon style="color:#454545;top: 40px;left: 20px;position: absolute;" type="close" @click="handleCancel"/>
      </div>
      <div v-if="fileList.showList && fileList.showList.length>1" @click="lastPicture" onselectstart="return false;" class="lastPicture">
        <a-icon type="arrow-left" />
      </div>
      <div v-if="fileList.showList && fileList.showList.length>1" @click="nextPicture" onselectstart="return false;" class="nextPicture">
        <a-icon type="arrow-right" />
      </div>

      <div class="toolbar">
        <a-button-group>
          <a-button v-if="!isPdf" icon="zoom-in" shape="round" @click="pictureZoom(false)">放大</a-button>
          <a-button v-if="!isPdf" icon="zoom-out" shape="round" @click="pictureZoom(true)">缩小</a-button>
          <a-button icon="download" shape="round" @click="downloadFile(fileList.fileList[fileNum].filePath)">下载</a-button>
          <a-button v-if="!isPdf" icon="undo" shape="round" @click="rotate('left')">左转</a-button>
          <a-button v-if="!isPdf" icon="redo" shape="round" @click="rotate('right')">右转</a-button>
          <a-button v-if="isEdit && !isPdf" :loading="loading" icon="save" shape="round"  @click="handleRotate">保存旋转</a-button>
        </a-button-group>
      </div>
      <div id="pdf-box" v-if="isPdf" class="paln-box">
        <a class="panel_body" :href="imgUrl+'#toolbar=0'"></a>
      </div>
      <div v-show="!isPdf" class="paln-box">
        <div
          class="movableItem"
          :style="{width:width,height:height}"
          @mousewheel="rollImg($event)"
          @DOMMouseScroll="rollImg($event)"
          @mousedown="drag($event,1)"
          ref="bigImage"
        >
          <!-- 图片不可选中 或不可拖拽到新标签打开-->
          <img
            ref="img"
            :style="{transform:'rotate('+this.deg+'deg)'}"
            :src="imgUrl"
            oncontextmenu="return false;"
            onselectstart="return false;"
            draggable="false"
            alt
          />
        </div>
      </div>
    </div>

</template>
<script>
  export default {
    props: {
      equipment: {
        type: Array,
        default: () => {
          return [
            {
              iconImgUrl: "",
              top: 0,
              left: 0,
            },
          ];
        },
      },
      isEdit: {
        default: false,
      },
      isFlow:{
        default: false,
      },
      fileList:{},
      fileNum:{},
    },

    data() {
      return {
        isPdf:false,
        ms: 20, //函数节流 ms 时间触发一次
        lastClick: Date.now() - 20,
        imgUrl: '',
        imgName: '',
        deg:0,
        // 定时器
        timer: "",
        // 图片加载失败
        imgOnerror: false,
        imgIndex: 0,
        isChange: true,
        // 图片显示默认大小
        width: "1000px",
        height: "600px",
        // 可缩小倍数,为空则可无限缩小
        minification: 3,
        // 可放大倍数 为空则可无限放大
        magnification: "",
        bigMaxWidth: 1600,
        bigMaxHeight: 800,
        loading:false,
      };
    },
    methods: {
      downloadFile(path){
        if(path.indexOf('http')===-1){
          path = this.buildPath(path)
        }
        let a = document.createElement('a')
        a.href =path
        a.target = '_blank'
        a.style.display = 'none'
        a.click();
      },
      eventPath(evt) {
        const path = (evt.composedPath && evt.composedPath()) || evt.path,
          target = evt.target;

        if (path != null) {
          return path.indexOf(window) < 0 ? path.concat(window) : path;
        }

        if (target === window) {
          return [window];
        }

        function getParents(node, memo) {
          memo = memo || [];
          const parentNode = node.parentNode;

          if (!parentNode) {
            return memo;
          } else {
            return getParents(parentNode, memo.concat(parentNode));
          }
        }

        return [target].concat(getParents(target), window);
      },
      lastPicture(){
        --this.fileNum
        if(this.fileNum<0){
          this.fileNum=this.fileList.showList.length-1
        }

        if(this.fileList.showList[this.fileNum].response){
          this.imgUrl=this.buildPath(this.fileList.showList[this.fileNum].response.result.filePath)
          this.imgName=this.fileList.showList[this.fileNum].response.result.originalName
        }else{
          this.imgUrl=this.fileList.showList[this.fileNum].originalImage
          this.imgName=this.fileList.showList[this.fileNum].name
        }
        this.deg=0

        //判断是否word excel
        if(this.imgUrl.indexOf(".doc")!==-1 || this.imgUrl.indexOf(".docx")!==-1 ||
          this.imgUrl.indexOf(".xls")!==-1 || this.imgUrl.indexOf(".xlsx")!==-1){
          this.imgUrl = this.imgUrl.substring(0,this.imgUrl.lastIndexOf('.'))+'.pdf'
        }

        if(this.imgUrl.indexOf(".pdf")!==-1){
          this.isPdf=true
          this.$nextTick(()=>{
            $('#pdf-box')[0].innerHTML='<div class="panel_body" style="background-color: rgba(255, 255, 255, 0);"> <iframe id="pdfFrame" frameborder="0" marginheight="0" marginwidth="0" width="800" height="'+(window.innerHeight-40)+'" src="'+this.imgUrl+'#toolbar=0'+'"></iframe></div>'
          })
        }else{
          this.isPdf=false
          this.getImgInfo(
            this.imgUrl,
            this.bigMaxWidth,
            this.bigMaxHeight,
            "width",
            "height"
          );
          let moveObjs = document.getElementsByClassName('movableItem')
          moveObjs[0].style.top=''
          moveObjs[0].style.left=''
        }
        this.$emit("numChange",this.fileNum)
      },
      nextPicture(){
        ++this.fileNum
        if(this.fileNum>=this.fileList.showList.length){
          this.fileNum=0
        }
        if(this.fileList.showList[this.fileNum].response){
          this.imgUrl=this.buildPath(this.fileList.showList[this.fileNum].response.result.filePath)
          this.imgName=this.fileList.showList[this.fileNum].response.result.originalName
        }else{
          this.imgUrl=this.fileList.showList[this.fileNum].originalImage
          this.imgName=this.fileList.showList[this.fileNum].name
        }
        this.deg=0
        //判断是否word excel
        if(this.imgUrl.indexOf(".doc")!==-1 || this.imgUrl.indexOf(".docx")!==-1 ||
          this.imgUrl.indexOf(".xls")!==-1 || this.imgUrl.indexOf(".xlsx")!==-1){
          this.imgUrl = this.imgUrl.substring(0,this.imgUrl.lastIndexOf('.'))+'.pdf'
        }

        if(this.imgUrl.indexOf(".pdf")!==-1){
          this.isPdf=true
          this.$nextTick(()=>{
            $('#pdf-box')[0].innerHTML='<div class="panel_body" style="background-color: rgba(255, 255, 255, 0);"> <iframe id="pdfFrame" frameborder="0" marginheight="0" marginwidth="0" width="800" height="'+(window.innerHeight-40)+'" src="'+this.imgUrl+'#toolbar=0'+'"></iframe></div>'
          })
        }else{
          this.isPdf=false
          this.getImgInfo(
            this.imgUrl,
            this.bigMaxWidth,
            this.bigMaxHeight,
            "width",
            "height"
          );
          let moveObjs = document.getElementsByClassName('movableItem')
          moveObjs[0].style.top=''
          moveObjs[0].style.left=''
        }
        this.$emit("numChange",this.fileNum)
      },
      //构建文件路径
      buildPath(path) {
        return window._CONFIG['staticDomainURL'] + '/' + path
      },
      handleImgRotate(rotate) {
        return new Promise((resolve, reject) => {
          let that =this
          let canvas = document.createElement('canvas');
          let ctx = canvas.getContext('2d');
          let imgObj = new Image()
          imgObj.src = that.$refs.img.src
          imgObj.onload = function(){
            //拿到图片真实像素 imgObj.width 并不是真正的宽度
            canvas.style.width=imgObj.naturalWidth
            canvas.style.height=imgObj.naturalHeight
            let w = this.width,
              h = this.height;
            //解决图片跨域问题
            imgObj.setAttribute('crossOrigin', 'anonymous');
            ctx.drawImage(imgObj, 0, 0, w, h);

            if(rotate<0){
              rotate=360+rotate
            }
            switch (rotate) {
              case 0:
                break;
              case 90:
                canvas.width=imgObj.naturalHeight
                canvas.height=imgObj.naturalWidth
                ctx.rotate(90 * Math.PI / 180);
                ctx.drawImage(imgObj, 0, -h, w, h);
                break;
              case 180:
                canvas.width=imgObj.naturalWidth
                canvas.height=imgObj.naturalHeight
                ctx.rotate(180 * Math.PI / 180);
                ctx.drawImage(imgObj, -w, -h, w, h);
                break;
              case 270:
                canvas.width=imgObj.naturalHeight
                canvas.height=imgObj.naturalWidth
                ctx.rotate(270 * Math.PI / 180);
                ctx.drawImage(imgObj, -w, 0, w, h);
                break;
            }
            let data = canvas.toDataURL('image/jpeg')
            if(data!='data:,'){
              that.$emit("handleRotate",data,that.fileList.showList[that.fileNum]);
            }
            that.loading=false
            resolve(1)
          }
        })
      },
      async handleRotate(){
        if(this.deg!=0){
          this.loading=true
          await this.handleImgRotate(this.deg)
        }else{
          this.$emit("cancel")
        }
      },
      // 旋转
      rotate(path){
        if(path=='left'){
          this.deg -= 90;
        }else{
          this.deg += 90;
        }
        if(this.deg >= 360 || this.deg <= -360){
          this.deg = 0
        }
      },

      pictureZoom(shrink){
        let oImg = this.$refs.bigImage;
        if (shrink) {
          if(oImg.offsetWidth<=100){
            return false
          }
          oImg.style.width = parseInt(oImg.offsetWidth * 0.9) + "px";
          oImg.style.height = parseInt(oImg.offsetHeight * 0.9) + "px";
        } else {
          oImg.style.width = parseInt(oImg.offsetWidth * 1.1) + "px";
          oImg.style.height = parseInt(oImg.offsetHeight * 1.1) + "px";
        }
        // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
        oImg.style.left =
          Math.round(oImg.offsetLeft) + "px";
        oImg.style.top =
          Math.round(oImg.offsetTop) + "px";
      },
      handleCancel(){
        this.isPdf=false
        this.$emit("cancel")
      },
      // 获取图片大小
      // ,objWidth,objHeight
      getImgInfo(
        imgUrl,
        MaxWidth,
        MaxHeight,
        StrWidth,
        StrHeight,
        Array = false,
        arr,
        num = 0
      ) {
        var img = new Image();

        img.src = imgUrl;
        // const vm = this;
        let _this = this;
        img.onerror = () => {
          _this.imgOnerror = true;
          _this.imgIndex =
            _this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
          this.timer = setTimeout(() => {
            if (num <= 5) {
              _this.getImgInfo(
                imgUrl,
                MaxWidth,
                MaxHeight,
                StrWidth,
                StrHeight,
                Array,
                arr,
                num + 1
              );
            }
            clearInterval(this.timer);
          }, 2000);
        };
        img.onload = function (e) {
          //  显示时 初始 最大宽度
          let maxWidth = MaxWidth;
          //  显示时 初始 最大高度
          let maxHeight = MaxHeight;
          if (!e.path) {
            e.path = _this.eventPath(e);
          }
          if (
            e.path[0].naturalWidth <= maxWidth &&
            e.path[0].naturalHeight <= maxHeight
          ) {
            _this[StrWidth] = e.path[0].naturalWidth + "px";
            _this[StrHeight] = e.path[0].naturalHeight + "px";
          } else {
            _this[StrWidth] = e.path[0].naturalWidth + "px";
            _this[StrHeight] = e.path[0].naturalHeight + "px";
            if (
              e.path[0].naturalWidth > maxWidth &&
              e.path[0].naturalHeight <= maxHeight
            ) {
              let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
              _this[StrWidth] = "1600px";
              _this[StrHeight] = maxWidth / ratio + "px";
            } else if (
              e.path[0].naturalWidth <= maxWidth &&
              e.path[0].naturalHeight > maxHeight
            ) {
              let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
              _this[StrWidth] = maxHeight * ratio + "px";
              _this[StrHeight] = "800px";
            } else if (
              e.path[0].naturalWidth > maxWidth &&
              e.path[0].naturalHeight > maxHeight
            ) {
              let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
              let w = maxWidth;
              let h = w / ratio;
              if (h > maxHeight) {
                let ratio2 = w / h;
                h = maxHeight;
                w = h * ratio2;
              }
              _this[StrWidth] = w + "px";
              _this[StrHeight] = h + "px";
            }
          }

        };
      },
      // 缩放
      rollImg() {
        var oImg = this.$refs.bigImage;
        var _this = this;
        function fnWheel(obj, fncc) {
          obj.onmousewheel = fn;
          if (obj.addEventListener) {
            obj.addEventListener("DOMMouseScroll", fn, false);
          }
          function fn(ev) {
            // 函数节流 ms 时间触发一次 解决火狐 ie 卡顿问题
            if (Date.now() - _this.lastClick >= _this.ms) {
              _this.lastClick = Date.now();
              var oEvent = ev || window.event;
              var down = true;
              if (oEvent.detail) {
                down = oEvent.detail > 0;
              } else {
                down = oEvent.wheelDelta < 0;
              }
              if (fncc) {
                fncc.call(this, down, oEvent);
              }
              if (oEvent.preventDefault) {
                oEvent.preventDefault();
              }
              return false;
            }
          }
        }
        fnWheel(oImg, function (down, oEvent) {
          var oldWidth = this.offsetWidth;
          var oldHeight = this.offsetHeight;
          var oldLeft = this.offsetLeft;
          var oldTop = this.offsetTop;
          var parent = oEvent.path[2];
          // 获取父元素距离页面可视区域的位置
          var parentLeft = parent.getBoundingClientRect().left;
          var parentTop = parent.getBoundingClientRect().top;
          // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
          var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
          var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;

          let nowWidth = this.style.width.split("p")[0];
          let initWidth = _this.width.split("p")[0];
          let initHeight = _this.height.split("p")[0];

          let miniFlag = true;
          let magniFlag = true;
          if (_this.minification) {
            // 限制缩小范围
            if (nowWidth <= parseInt(initWidth / _this.minification)) {
              miniFlag = false;
              this.style.width = parseInt(initWidth / _this.minification) + "px";
              this.style.height =
                parseInt(initHeight / _this.minification) + "px";
            }
            if (_this.magnification) {
              // 限制放大范围
              if (nowWidth >= parseInt(initWidth * _this.magnification)) {
                magniFlag = false;
                this.style.width =
                  parseInt(initWidth * _this.magnification) + "px";
                this.style.height =
                  parseInt(initHeight * _this.magnification) + "px";
              }
            }
          }

          if (down && miniFlag) {
            this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
            this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
          } else if (!down && magniFlag) {
            this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
            this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
          }
          var newWidth = this.offsetWidth;
          var newHeight = this.offsetHeight;

          // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
          this.style.left =
            Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
          this.style.top =
            Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
        });
      },
      // },
      //拖拽
      drag(ev) {
        var nn6 = document.getElementById && !document.all;
        var isdrag = false;
        var y, x;
        var nTY, nTX;
        var oDragObj;
        let _this = this
        function moveMouse(e) {
          if (isdrag) {
            oDragObj.style.top =
              (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
            oDragObj.style.left =
              (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
            return false;
          }
        }
        function initDrag(e) {
          var oDragHandle = nn6 ? e.target : event.srcElement;
          var topElement = "HTML";
          while (
            oDragHandle.tagName != topElement &&
            oDragHandle.className != "movableItem"
            ) {
            oDragHandle = nn6
              ? oDragHandle.parentNode
              : oDragHandle.parentElement;
          }
          if (oDragHandle.className == "movableItem") {
            isdrag = true;
            oDragObj = oDragHandle;
            // 父元素宽高
            if (!e.path) {
              e.path = _this.eventPath(e);
            }
            let width = e.path[2].offsetWidth;
            let height = e.path[2].offsetHeight;
            // 这里判断第一次获取不到style 样式 默认为 居中50%
            if (oDragObj.style.top == "") {
              nTY = parseInt((50 * height) / 100 + 0);
              nTX = parseInt((50 * width) / 100 + 0);
            } else {
              nTY = parseInt(oDragObj.style.top + 0);
              nTX = parseInt(oDragObj.style.left + 0);
            }
            y = nn6 ? e.clientY : event.clientY;
            x = nn6 ? e.clientX : event.clientX;
            oDragObj.style.cursor = "move";
            document.onmousemove = moveMouse;
            return false;
          }
        }
        document.onmousemove = initDrag;
        document.onmouseup = function (e) {
          isdrag = false;
          document.onmousemove = null;
          document.onmouseup = null;
          var oDragHandle = nn6 ? e.target : event.srcElement;
          var topElement = "HTML";
          while (
            oDragHandle.tagName != topElement &&
            oDragHandle.className != "movableItem"
            ) {
            oDragHandle = nn6
              ? oDragHandle.parentNode
              : oDragHandle.parentElement;
          }
          if (oDragHandle.className == "movableItem") {
            oDragObj = oDragHandle;
            oDragObj.style.cursor = "Default";
          }
        };
        ev = event || window.event;

        // 取消事件冒泡行为
        // window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
      },
      // 拖拽标记
      // eslint-disable-next-line no-unused-vars
      dragSign(ev, key) {
        var nn6 = document.getElementById && !document.all;
        var isdrag = false;
        var y, x;
        var nTY, nTX;
        var oDragObj;
        let _this = this;
        function moveMouse(e) {

          if (isdrag) {
            if (!e.path) {
              e.path = _this.eventPath(e);
            }
            let widthItem = e.path[1].style.width.split("p");
            let heightItem = e.path[1].style.height.split("p");
            let width = widthItem[0];
            let height = heightItem[0];
            let top =
              ((nn6
                ? (nTY / 100) * height + e.clientY - y
                : (nTY / 100) * height + event.clientY - y) /
                height) *
              100;
            let left =
              ((nn6
                ? (nTX / 100) * width + e.clientX - x
                : (nTX / 100) * width + event.clientX - x) /
                width) *
              100;

            if (top >= 0 && top <= 100) {
              _this.equipment[key].top = top;
            }
            if (left >= 0 && left <= 100) {
              _this.equipment[key].left = left;
            }

            return false;
          }
        }

        function initDrag(e) {
          var oDragHandle = nn6 ? e.target : event.srcElement;
          var topElement = "HTML";
          while (
            oDragHandle.tagName != topElement &&
            oDragHandle.className.indexOf("equipment") == -1
            ) {
            oDragHandle = nn6
              ? oDragHandle.parentNode
              : oDragHandle.parentElement;
          }
          if (oDragHandle.className.indexOf("equipment") != -1) {
            isdrag = true;
            oDragObj = oDragHandle;
            // 父元素宽高
            if (!e.path) {
              e.path = _this.eventPath(e);
            }
            let width = e.path[1].offsetWidth;
            let height = e.path[1].offsetHeight;
            // 这里判断第一次获取不到style 样式 默认为 居中50%
            if (oDragObj.style.top == "") {
              nTY = parseInt((50 * height) / 100 + 0);
              nTX = parseInt((50 * width) / 100 + 0);
            } else if (oDragObj.style.top.indexOf("%") != -1) {
              nTY = oDragObj.style.top.split("%")[0];
              nTX = oDragObj.style.left.split("%")[0];
            } else {
              nTY = parseInt(oDragObj.style.top + 0);
              nTX = parseInt(oDragObj.style.left + 0);
            }
            y = nn6 ? e.clientY : event.clientY;
            x = nn6 ? e.clientX : event.clientX;

            oDragObj.style.cursor = "move";
            document.onmousemove = moveMouse;
            return false;
          }
        }

        // document.onmousedown = initDrag;
        document.onmousemove = initDrag;

        document.onmouseup = function (e) {
          isdrag = false;
          document.onmousemove = null;
          document.onmouseup = null;
          var oDragHandle = nn6 ? e.target : event.srcElement;
          var topElement = "HTML";
          while (
            oDragHandle.tagName != topElement &&
            oDragHandle.className != "equipment"
            ) {
            oDragHandle = nn6
              ? oDragHandle.parentNode
              : oDragHandle.parentElement;
          }
          if (oDragHandle.className == "equipment") {
            oDragObj = oDragHandle;
            oDragObj.style.cursor = "Default";
          }
        };

        // _this.equipmentKey = key;
        // _this.equipment[_this.equipmentKey].left = l;
        // _this.equipment[_this.equipmentKey].top = t;
        ev = event || window.event;

        // 取消事件冒泡行为
        window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
      },
    },
    destroyed() {
      clearInterval(this.timer);
    },
    watch: {

    },
    mounted(){
      if(this.isPdf){
        this.$nextTick(()=>{
          $('a.panel_body').media({bgColor:'rgba(255,255,255,0)',width:800,height:(window.innerHeight-40)});
        })
      }

    },
    created() {
      if(this.fileList.showList[this.fileNum].response){
        this.imgUrl=this.buildPath(this.fileList.showList[this.fileNum].response.result.filePath)
        this.imgName=this.fileList.showList[this.fileNum].response.result.originalName
      }else{
        this.imgUrl=this.fileList.showList[this.fileNum].originalImage
        this.imgName=this.fileList.showList[this.fileNum].name
      }

      //判断是否word excel
      if(this.imgUrl.indexOf(".doc")!==-1 || this.imgUrl.indexOf(".docx")!==-1 ||
        this.imgUrl.indexOf(".xls")!==-1 || this.imgUrl.indexOf(".xlsx")!==-1){
        this.imgUrl = this.imgUrl.substring(0,this.imgUrl.lastIndexOf('.'))+'.pdf'
      }

      if(this.imgUrl.indexOf(".pdf")!==-1){
        this.isPdf=true
      }else{
        this.isPdf=false
        this.getImgInfo(
          this.imgUrl,
          this.bigMaxWidth,
          this.bigMaxHeight,
          "width",
          "height"
        );
      }

    },
  };
</script>
<style lang="less">
  .preview-popover {
    background-color: #d3edf7dd;
    padding: 12px;
    .popper__arrow::after {
      border-bottom-color: #d3edf7dd !important;
    }
    .describe {
      p {
        padding-bottom: 5px;
        &:last-child {
          padding-bottom: 0px;
        }
      }
      .describe-top {
        // color: sandybrown;
        // color: red;
        color: rgb(21, 110, 110);
      }
      .describe-center {
        color: rgb(79, 21, 206);
      }
      .describe-bottom {
        color: rgb(30, 31, 29);
      }
    }
  }
</style>
<style lang="less" scoped>

  .img-close{
    position: absolute;
    font-size: 35px;
    top: -30px;
    right: -30px;
    background: rgba(255,255,255,.7);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    line-height: 37px;
    color: rgba(255,255,255,.6);
    z-index: 100;
    box-shadow: -2px 2px 5px #888888;
    cursor:pointer;
  }
  .img-close :hover{
    color: rgba(70, 146, 255, 0.9);
  }
  .pop-up-main {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    .paln-box {
      width: 100%;
      height: 100%;
      position: relative;

      .movableItem {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        img {
          z-index: 1;
          width: 100%;
          height: 100%;
        }

        .equipment {
          position: absolute;
          top: 0;
          left: 0;
          transform: translate(-50%, -50%);
          z-index: 2;
          font-size: 40px;
          // color: red;
          // background: blue;
          zoom: 1;
        }
      }
      .shuaxin {
        position: absolute;
        z-index: 2;
        font-size: 40px;
        top: 20px;
        left: 20px;
        cursor: pointer;
        &:hover {
          color: yellowgreen;
        }
      }
      .equipment {
        color: white;
      }
      &/deep/.el-button {
        z-index: 2;
        position: absolute;
        bottom: 60px;
        right: 20px;
        width: 60px;
        height: 35px;
        span {
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        i {
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 25%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .lastPicture{
    z-index: 9999;
    position: absolute;
    left:10px;
    top:calc(50vh - 20px);
    font-size: 30px;
    color: rgba(255,255,255,.5);
    width: 50px;
    height: 50px;

  }
  .lastPicture :hover{
    color: rgba(255,255,255,1);
  }

  .nextPicture{
    z-index: 9999;
    position: absolute;
    right:10px;
    top:calc(50vh - 20px);
    font-size: 30px;
    color: rgba(255,255,255,.5);
    width: 50px;
    height: 50px;
  }
  .nextPicture :hover{
    color: rgba(255,255,255,1);
  }
  .toolbar{
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>